<template>
  <el-card class="component-flow-card" shadow="hover">
    <template #header>
      <i class="el-icon-s-help" />
      <span style="margin-left: 5px; font-weight: bold">{{ flow.title }}</span>
    </template>

    <div class="flow-card-container">
      <div
        class="flow-card-item"
        v-for="f in flow.flows"
        :key="f.title"
        @click="jump(f)"
      >
        {{ f.title }}
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
import { FlowPostItem } from '@/api/flow'
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'FlowCard',
  props: {
    flow: {
      type: Object,
      required: true
    }
  },
  setup() {
    const router = useRouter()
    return {
      jump: (f: FlowPostItem) => router.push({ name: f.name })
    }
  }
})
</script>

<style lang="scss" scoped>
.component-flow-card {
  width: 320px;
  .flow-card-container {
    .flow-card-item {
      cursor: pointer;
      &:hover {
        transform: scale(1.1);
        transform-origin: 0 50%;
        text-shadow: 0 0 1px #333;
      }
    }
  }

  .flow-card-item + .flow-card-item {
    margin-top: 20px;
  }
}
// .component-flow-card ::v-deep .el-card__header {
//   padding: 8px 10px;
// }
.component-flow-card:hover ::v-deep .el-card {
  background: rgba(74, 183, 189, 0.1);
  // color: #3a71a8;
}
</style>
